<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>宇成建筑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="../statics/css/font.css">
    <link rel="stylesheet" href="../statics/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../statics/css/xadmin.css">
    <link rel="stylesheet" href="../statics/css/style.css">
    <style>
        .layui-table td, .layui-table th {
            min-width: 40px;
        }
        .layui-table-cell {
            padding: 0px 10px;
        }
    </style>
</head>

<body class='labelAuto'>
<div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="welcome.html">首页</a>
            <a href="javascript:;">施工管理</a>
            <a><cite>杂工分账明细</cite></a>
        </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right;margin-right:10px"
       onclick="window.history.go(-1)" title="后退">
        <i class="iconfontBlod" style="line-height:30px">&#xe74f;</i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body search">
                    <form action="" class="layui-form">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">日期</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" id="startTime" placeholder="">
                                </div>
                                <div class="layui-input-block" style="width:10px;text-align: center">
                                    -
                                </div>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" id="endTime" placeholder="">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">搜索</label>
                                <div class="layui-input-block">
                                    <input type="search" autocomplete="off" class="layui-input" id='searchInput'>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn search" type="button" id='search'>
                                    <i class="iconfont layui-icon">&#xe615;</i>
                                </button>
                            </div>
                            <div class="layui-inline" style="float: right">
                                <button class="layui-btn add" type="button" auth='editHandyman'>添加杂工记录</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body tableCardBody">
                    <table class="layui-table" id="lists" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type='text/html' id='toolbar'>

</script>
<script src="../statics/plugins/layui/layui.js" charset="utf-8"></script>
<script src='../statics/plugins/jQuery-3.2.1/jquery-3.2.1.min.js'></script>
<script type="text/javascript" src="../statics/plugins/X-admin/xadmin.js"></script>
<script type="text/javascript" src="../statics/js/public.js?v=1129"></script>
<script type="text/javascript">
    layui.use(['layer', "table", "laydate",'form'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var form = layui.form;
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() < 9 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
        var days = (new Date(year, month, 0)).getDate();
        var curYear = date.getFullYear();
        var curMonth = date.getMonth() < 9 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
        var curDays = date.getDate() < 9 ? '0' + (date.getDate() + 1) : date.getDate();

        date.setDate(date.getDate() - 30);
        var lastYear = date.getFullYear();
        var lastMonth = date.getMonth() < 9 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
        var lastDays = date.getDate() < 9 ? '0' + (date.getDate() + 1) : date.getDate();

        laydate.render({
            elem: '#startTime' //指定元素
            ,value:lastYear + '-' + lastMonth + '-' + lastDays
            , max :0
        });
        laydate.render({
            elem: '#endTime' //指定元素
            ,value:curYear + '-' + curMonth + '-' + curDays
            , max :0
        });
        var projectId = getParam('projectId');
        //用来记录账目明细中某工人查看其他项目的杂工账目时的项目id
        var otherProjectId = '';
        //工人杂工账
        var employeeOption = {
            elem: '#lists', //绑定DOM元素
            id: 'lists', //table的id
            title: '班组成员列表',
            height: 'full-150',
            contentType: "application/json; charset=utf-8",
            url: url + '/project/project/handymanAccountsLists', //数据接口地址
            request: {
                pageName: 'page', //页码的参数名称，默认：page
                limitName: 'length' //每页数据量的参数名，默认：limit
            },
            method: 'POST',
            parseData: function (res) {
                return {
                    "code": res.code, //解析接口状态
                    "data": res.data.data,
                    "msg": res.msg,
                    "count": res.data.count,
                    "projects": res.data.projects
                };
            },
            where: {
                projectId: projectId,
                search: "",
                startTime:lastYear + '-' + lastMonth + '-' + lastDays,
                endTime:curYear + '-' + curMonth + '-' + curDays,
                token: getToken()
            },
            toolbar: '#toolbar',
            defaultToolbar: [
                'filter',
                {title: '导出', layEvent: 'excel', icon: 'layui-icon-export'}
            ],
            page: true, //开启分页
            limit: 10, //默认每页记录条数
            limits: [10, 20, 50], //每页记录条数可选数量
            cols: [[ //表头
                {field: '', title: '编号', type: 'numbers', width: '50',totalRowText:"合计："},
                // {field: 'projectName', title: '项目', width: '10%'},
                {
                    field: 'separateTime', title: '记账时间', width: "85", templet: function (d) {
                        return (d.separateTime).substr(0, 10);
                    }
                },
                {field: 'jobNumber', title: '工号', width: '50'},
                {field: 'employeeName', title: '工人', width: '65'},
                {
                    field: 'areaName', title: '作业区域', width: '150', templet: function (d) {
                        return html = `<span class='table_inp' title=${d.areaName + '、' + d.sectionName}>${d.areaName + '、' + d.sectionName}</span>`
                    }
                },
                {field: 'professionName', title: '作业工种', width: '70'},
                {field: 'assignmentName', title: '施工项', width: '12%'},
                {field: 'assignmentDetail', title: '具体明细', width: '25%'},
                {
                    field: 'account', title: '分账金额', width: '85', templet: function (d) {
                        return numberFormat(d.account,'currency');
                    }
                },
                {field: 'adminName', title: '录入人', width: '65'},
                {
                    field: 'status', title: '审核状态', width: '70', templet: function (d) {
                        return approvalStatus(d.status);
                    }
                },
                {
                    field: 'option', title: '操作', width: '70', templet: function (d) {
                        if(d.status != 1 && d.status != 2 ){
                            return `<button class='layui-btn layui-btn-danger' lay-event="remove" type='button'>删除</button>`;
                        }else{
                            return '';
                        }
                    }
                },
            ]],
            response: {
                statusName: 'code', //数据状态的字段名称，默认：code
                statusCode: 100000, //成功的状态码，默认：0
                msgName: 'msg', //状态信息的字段名称，默认：msg
                countName: 'count', //数据总数的字段名称，默认：count
                dataName: 'data' //数据列表的字段名称，默认：data
            },
            done:function(){
                permission();
            }
        };

        var lists = table.render(employeeOption);

        table.on('tool(test)', function (data) {
            if (data.event == 'workSection') {
                var id = data.data.id;
                window.location.href = 'constructionLedgerZaGong.html?areaId=' + id + '&projectId=' + projectId;
            }else if(data.event == 'remove'){
                layer.open({
                    type: 1,
                    title: "删除",
                    area: ["40%", '30%'],
                    content:`
                        <form class="layui-form layerOpen" action="">
                            <div class="layui-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">是否删除 ${data.data.employeeName} 在 ${data.data.projectName} 在 ${data.data.separateTime.substr(0, 10)} 的杂工分账 ${numberFormat(data.data.account,'currency')} 元</label>
                                </div>
                            </div>
                        </form>
                    `,
                    btn: ['确定','取消'],
                    skin: 'my-skin',
                    yes:function(){
                        $.ajax({
                            url: url + '/project/project/delHandymanAccount',
                            type: 'post',
                            data: {
                                id: data.data.id,
                                token: getParam('token')
                            },
                            async: false,
                            dataType: 'json',
                            success: function (r) {
                                tips('删除',r);
                                setTimeout(function(){
                                    layer.closeAll();
                                    table.reload('lists',getOption(type));
                                })
                            }
                        })
                    }
                })
            }
        });
        table.on('toolbar(test)', function (data) {
            if (data.event == 'excel') {
                var exportProjectId = '';
                if($('.thisProject').length>0){
                    exportProjectId = $('.thisProject').data('id');
                }else{
                    exportProjectId = projectId
                }
                let startTime = $('input#startTime').val();
                let endTime = $('input#endTime').val();
                let searchStr = $('input#searchInput').val();

                layer.open({
                    type: 0,
                    title: "杂工分账",
                    area: ["40%", '45%'],
                    content: `
                            <form class="layui-form layerOpen" action="">
                                <div class="layui-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">项目</label>
                                        <div class="layui-input-inline">
                                            ${$('button.thisProject').text()?$('button.thisProject').text():'当前项目'}
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">时间</label>
                                        <div class="layui-input-inline">
                                            ${(startTime=='' && endTime=='')?'不限时间':startTime+'至'+endTime}
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">搜索条件</label>
                                        <div class="layui-input-inline">
                                            ${searchStr===''?'无':searchStr}
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-item">
                                    <div class="layui-inline">
                                        <div class="layui-input-inline">
                                            即将导出符合以上条件的杂工账目，点击“确认”导出
                                        </div>
                                    </div>
                                </div>
                            </form>
                        `,
                    btn: ['确定', '关闭'],
                    skin: 'my-skin',
                    success: function () {

                    },
                    yes: function () {
                        if (startTime !== '' && endTime !== '') {
                            var s = new Date(startTime);
                            var e = new Date(endTime);
                            if (e < s) {
                                layer.open({
                                    type: 0,
                                    title: "杂工分账",
                                    area: ["40%", '30%'],
                                    content: `请选择截止时间不能小于起始时间`,
                                    btn: ['关闭'],
                                    skin: 'my-skin'
                                })
                                return
                            }
                        }

                        layer.closeAll();
                        layer.open({
                            type: 0,
                            title: "杂工分账",
                            area: ["40%", '30%'],
                            content: `当前杂工分账记录正在生成中,请稍等!`,
                            btn: ['关闭'],
                            skin: 'my-skin'
                        });
                        $.ajax({
                            url: url + '/excel/export/handymanAccounts',
                            type: 'post',
                            data: {
                                projectId: exportProjectId,
                                startTime: startTime,
                                endTime: endTime,
                                search:searchStr,
                                token: getParam('token')
                            },
                            success: function (r) {
                                if (r.code == 100000) {
                                    layer.closeAll();
                                    layer.open({
                                        type: 0,
                                        title: "导出",
                                        area: ["40%", '30%'],
                                        content: `<p class='one_p'>${r.msg}</p>`,
                                        btn: ['关闭'],
                                        skin: 'my-skin'
                                    })
                                } else {
                                    layer.closeAll();
                                    layer.open({
                                        type: 0,
                                        title: "导出",
                                        area: ["40%", '30%'],
                                        content: `<p class='one_p'>${r.msg}</p>`,
                                        btn: ['关闭'],
                                        skin: 'my-skin'
                                    })
                                }
                            }
                        })
                    }
                });
            }
        });
        // 添加杂工分账
        $('body').on('click', 'button.add', function () {
            layer.open({
                type: 1,
                title: "添加杂工",
                area: ['80%', '70%'],
                content: `
                    <form class='layui-form layerOpen' lay-filter="layerForm">
                        <div class='layui-item'>
                            <div class='layui-inline'>
                                <label class='layui-form-label'>查询姓名</label>
                                <div class='layui-input-block'>
                                    <input type='text' placeholder='请输入姓名或工号' name='search' autocomplete="off" class='layui-input' data-id="">
                                    <ul class='layerOpen_ul_list'></ul>
                                </div>
                            </div>
                        </div>
                        <div class='layui-item'>
                            <div class='layui-inline'>
                                <label class='layui-form-label'>分账日期</label>
                                <div class='layui-input-block'>
                                    <input type="text" class="layui-input" id="test1" name="separateTime">
                                </div>
                            </div>
                        </div>
                        <div class='layui-item'>
                            <div class='layui-inline'>
                                <label class='layui-form-label'>分账总额</label>
                                <div class='layui-input-block'>
                                    <input type="number"  class="layui-input" name="totalAccounts" value="0">
                                </div>
                            </div>
                        </div>
                        <div class='layui-item detail'>
                            <div class='layui-inline'>
                                <label class='layui-form-label'>作业区域</label>
                                <div class='layui-input-block' style="width:12%">
                                    <select name="areaId" lay-filter="areaId" lay-search>${areaSelect(getParam('projectId'))}</select>
                                </div>
                                <div class='layui-input-block' style="width:12%">
                                    <select name="sectionId" lay-search>
                                        <option value="">请选择施工段</option>
                                    </select>
                                </div>
                                <div class='layui-input-block' style="width:12%">
                                    <select name="professionId" lay-filter="professionId" lay-search>
                                        ${professionSelect()}
                                    </select>
                                </div>
                                <div class='layui-input-block' style="width:12%">
                                    <select name="assignmentId" lay-search>
                                        <option value="">请选择施工项</option>
                                    </select>
                                </div>
                                <div class='layui-input-block' style="width:12%">
                                    <input type="number" class="layui-input" name="account" placeholder="请输入分账金额">
                                </div>
                                <div class='layui-input-block' style="width:17%">
                                    <input type="text" class="layui-input" name="assignmentDetail" placeholder="请输入施工明细或备注">
                                </div>
                                <div class='layui-input-block' style="width:2%">
                                    <button type="button" class="layui-btn btn btn-plus" style="width:26px">+</button>
                                </div>
                            </div>
                        </div>

                    </form>
                `,
                btn: ['确认', '取消'],
                skin: 'my-skin',
                success: function () {
                    laydate.render({
                        elem: 'input[name=separateTime]'
                        , type: 'date'
                        , value: new Date()
                        , max: 0
                    });
                    form.render();
                },
                yes: function (index, layero) {
                    var employeeId = $('input[name=search]').data('id');
                    var projectId = getParam('projectId');
                    var separateTime = $('input[name=separateTime]').val();
                    if (employeeId === ""){
                        tips('添加杂工分账', {msg: '请输入工号或姓名并选择'});
                        return false;
                    }
                    if (separateTime === ""){
                        tips('添加杂工分账', {msg: '请选择上账日期'});
                        return false;
                    }
                    var inline = $('.detail div.layui-inline');
                    var data = [];
                    for (var i = 0; i < inline.length; i++) {
                        areaId = Number($(inline[i]).find('select[name=areaId]').val());
                        sectionId = Number($(inline[i]).find('select[name=sectionId]').val());
                        professionId = Number($(inline[i]).find('select[name=professionId]').val());
                        assignmentId = Number($(inline[i]).find('select[name=assignmentId]').val());
                        account = Number($(inline[i]).find('input[name=account]').val());
                        assignmentDetail = $(inline[i]).find('input[name=assignmentDetail]').val();
                        if (areaId == 0 && sectionId == 0 && professionId == 0 &&assignmentId == 0){
                            continue;
                        }else if(!areaId || !sectionId || !professionId || !assignmentId){
                            tips('添加杂工分账', {msg: '请补全杂工账目信息'});
                            return false;
                        }else{
                            data.push({
                                areaId: areaId,
                                sectionId: sectionId,
                                professionId: professionId,
                                assignmentId: assignmentId,
                                account: account,
                                assignmentDetail: assignmentDetail
                            })
                        }
                    }
                    if (data.length === 0){
                        tips('添加杂工分账', {msg: '请至少填写一条杂工账目信息'});
                        return false;
                    }
                    $.ajax({
                        url: url + "/project/project/addHandymanAccounts",
                        type: "POST",
                        data: {
                            employeeId: employeeId,
                            projectId: projectId,
                            separateTime: separateTime,
                            data: data,
                            token: getToken()
                        },
                        beforeSend:function(){
                            $('.layui-layer-btn0').css('pointer-events','none')
                        },
                        success: function (r) {
                            if (r.code == 100000) {
                                tips('添加杂工分账', r);
                                setTimeout(function () {
                                    layer.closeAll();
                                    table.reload('lists',employeeOption);
                                }, 2000)
                            } else {
                                tips('添加杂工分账', r);
                            }
                        },
                        complete:function(){
                            $('.layui-layer-btn0').css('pointer-events','unset')
                        }
                    })
                }
            })
        });

        //明细记录中查询某工人后，显示其在不同项目的杂工账
        $('body').on('click','button.employeeProject',function(){
            var tmp = Number($(this).data('id'));
            otherProjectId = tmp;
            employeeSearch(tmp);
        });
        //搜索
        $('body').on('click', '#search', function () {
            employeeSearch(projectId);
        });

        form.on('select(areaId)',function (data) {
            var option = sectionSelect(data.value);
            $(data.elem).parent().parent().find('select[name=sectionId]').empty().html(option);
            form.render();
        });

        form.on('select(professionId)',function (data) {
            if (data.value == ''){
                return false;
            }
            var option = assignmentSelect(data.value);
            $(data.elem).parent().parent().find('select[name=assignmentId]').empty().html(option);
            form.render();
        })

        $('body').on('click','button.btn-plus',function(){
            var html =`<div class='layui-inline' style="margin-top:5px;">
                                <label class='layui-form-label'></label>
                                <div class='layui-input-block' style="width:12%">
                                    <select name="areaId" lay-filter="areaId" lay-search>${areaSelect(getParam('projectId'))}</select>
                                </div>
                                <div class='layui-input-block' style="width:12%">
                                    <select name="sectionId" lay-search>
                                        <option value="">请选择施工段</option>
                                    </select>
                                </div>
                                <div class='layui-input-block' style="width:12%">
                                    <select name="professionId" lay-filter="professionId" lay-search>
                                        ${professionSelect()}
                                    </select>
                                </div>
                                <div class='layui-input-block' style="width:12%">
                                    <select name="assignmentId" lay-search>
                                        <option value="">请选择施工项</option>
                                    </select>
                                </div>
                                <div class='layui-input-block' style="width:12%">
                                    <input type="number" class="layui-input" name="account" placeholder="请输入分账金额">
                                </div>
                                <div class='layui-input-block' style="width:17%">
                                    <input type="text" class="layui-input" name="assignmentDetail" placeholder="请输入施工明细或备注">
                                </div>
                                <div class='layui-input-block' style="width:2%">
                                    <button type="button" class="layui-btn btn btn-plus" style="width:26px">+</button>
                                </div>
                            </div>`
            $('.detail').append(html);
            $('.btn:not(:last)').removeClass('btn-plus').addClass('btn-minus').empty().html('-');
            form.render()
        })

        $('body').on('click','button.btn-minus',function(){
            $(this).parent().parent().remove();
            if($('.detail div.layui-inline:first label').html() === ""){
                $('.detail div.layui-inline:first label').html('作业区域')
            }
        })

        $('body').on('input propertychange','input[name=account]',function(){
            var inputAccount = $('input[name=account]');
            var accountTotal= 0;
            var val = 0;
            for (var i=0;i<inputAccount.length;i++){
                val = $(inputAccount[i]).val()
                if (val != '' ){
                    accountTotal+=Number(val);
                }
            }
            $('input[name=totalAccounts]').val(accountTotal);
        })

        function employee() {
            type = 'employee';
            laydate.render({
                elem: '#startTime'
                , type: 'date'
                , value: lastYear + '-' + lastMonth + '-' + lastDays
                , max: 0
            });
            laydate.render({
                elem: '#endTime'
                , type: 'date'
                , value: curYear + '-' + curMonth + '-' + curDays
                , max: 0
            });
            $('div.search').show();
            $('input#startTime').parent().parent().show();
            $('input#month').parent().parent().hide();
            $('input#searchInput').parent().parent().show();
            $('button#search').parent().show();
        }

        function calendar() {
            type = 'calendar';
            laydate.render({
                elem: '#month'
                , type: 'month'
                , value: curYear + '-' + curMonth
                , max: 0
            });
            $('div.search').show();
            $('input#month').parent().parent().show();
            $('input#searchInput').parent().parent().hide();
            $('input#startTime').parent().parent().hide();
            $('button#search').parent().show();
        }

        function building() {
            type = 'building';
            $('input#month').parent().parent().hide();
            $('input#searchInput').parent().parent().hide();
            $('input#startTime').parent().parent().hide();
            $('button#search').parent().hide();
        }

        function getOption(type){
            switch (type) {
                case 'calendar':
                    return calendarOption;
                case 'employee':
                    return employeeOption;
                case 'building':
                    return buildingOption;
            }
        }

        function employeeSearch(otherProjectId){
            var search = $('input#searchInput').val();
            var startTime = $('input#startTime').val();
            var endTime = $('input#endTime').val();
            if (search != ''){
                var tmpOption = {
                    where: {
                        token: getToken(),
                        projectId: projectId,
                        startTime:startTime,
                        endTime:endTime,
                        search: search,
                        otherProjectId:otherProjectId
                    },
                    page:false,
                    totalRow:true,
                    done:function(res, curr, count){
                        var projects = res.projects;
                        var toolBtn = '';
                        for(var i=0;i<projects.length;i++){
                            if (projects[i].projectId == otherProjectId){
                                toolBtn+= `<button class="layui-btn employeeProject thisProject" type="button" data-id="${projects[i].projectId}">${projects[i].projectName}</button>`
                            }else{
                                toolBtn+= `<button class="layui-btn employeeProject" type="button" data-id="${projects[i].projectId}">${projects[i].projectName}</button>`
                            }

                        }
                        $('.layui-table-tool-temp').empty().html(toolBtn);
                    }
                }
            }else{
                var tmpOption = {
                    where: {
                        token: getToken(),
                        projectId: getParam('projectId'),
                        startTime:startTime,
                        endTime:endTime,
                        search: search
                    },
                    page:true,
                    totalRow:false,
                    done:function(res, curr, count){}
                }
            }
            table.reload('lists', tmpOption)
        }
    });
</script>

</html>